<template>
    <div>
        <el-tabs v-model="testTabsValue" type="card" editable @tab-remove="removeTab"
                 @tab-add="addTab(testTabsValue)">
            <el-tab-pane
                    v-for="(testTab) in testTabs"
                    :key="testTab.name"
                    :label="testTab.title"
                    :name="testTab.name">
                <el-row>
                    <el-col :span="24">
                        <div class="">
                            <span class="title_udp">{{testTab.title_udp}}</span>

                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-form ref="form_udp" :model="form_udp" label-width="80px">
                                <el-form-item label="名称：">
                                    <el-input v-model="form_udp.name"><el-button slot="append" icon="el-icon-document-add">保存
                                    </el-button></el-input>
                                </el-form-item>
                                <el-form-item label="端口：">
                                    <el-input v-model="form_udp.udpPort"><el-button slot="append" icon="el-icon-s-promotion">send</el-button></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div><span>Request body</span></div>
                        <el-input
                                type="textarea"
                                :rows="5"
                                v-model="form_udp.requestBody">
                        </el-input>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="24">
                        <div><span>Response body</span></div>
                        <el-input
                                type="textarea"
                                :rows="10"
                                disabled
                                v-model="form_udp.responseBody">
                        </el-input>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form_udp: {
                    name: '',
                    udpPort: '',
                    requestBody: '',
                    responseBody: ''
                },
                testTabsValue: '1',
                testTabs: [{
                    title: 'GET',
                    name: '1',
                    title_udp: '',
                    requestTabs: 'first',
                    responseTabs: 'first',
                    api_data:{
                        protocol: 'GET',
                        url_udp: '',
                        params: [{param_key: "", param_val: ""}],
                        headers: [{header_key: "", header_val: ""}],
                        requestBody: '',
                        responseBody: ''
                    }
                }],
                tabIndex: 1,
            }
        },
        watch: {
            testTabs: {
                handler: function () {
                    //console.log("监控的对象数组是："+JSON.stringify(this.testTabs));
                    for(let key in this.testTabs){
                        //console.log("当前对象是："+key+":"+JSON.stringify(this.testTabs[key]));
                        let temp = this.testTabs[key];
                        temp.title_udp = temp.api_data.url_udp;
                        if (temp.api_data.url_udp.length>12){
                            let tempStr = temp.api_data.url_udp.substr(1,12);
                            temp.title = temp.api_data.protocol+" "+tempStr
                        }else {
                            temp.title = temp.api_data.protocol+" "+temp.api_data.url_udp
                        }
                    }
                },
                deep: true
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log("当前点击的tab信息：",tab, event);
            },
            addTab() {
                let newTabName = ++this.tabIndex + '';
                this.testTabs.push({
                    title: '',
                    name: newTabName,
                    title_udp: '',
                    requestTabs: 'first',
                    responseTabs: 'first',
                    api_data: {
                        protocol: 'GET',
                        url_udp: '',
                        params: [{param_key: "", param_val: ""}],
                        headers: [{header_key: "", header_val: ""}],
                        requestBody: '',
                        responseBody: ''
                    }
                });
                this.testTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.testTabs;
                let activeName = this.testTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.testTabsValue = activeName;
                this.testTabs = tabs.filter(tab => tab.name !== targetName);
            },
            del_head(items,testTab) {
                let index = items.indexOf(testTab);
                if (index !== -1) {
                    items.splice(index, 1)
                }
            },
            add_head(testTab) {
                testTab.push({keys: "", val: ""});
            }
        }
    }
</script>

<style scoped>
    .save_udp {
        float: right;
    }

    .title_udp {
        float: left;
        line-height: 40px;
    }

    .el-select .el-input {
        width: 130px;
    }

    .input-with-select {
        background-color: #fff;
    }
    .request_data{
        width: 45% !important;
        margin: 2px !important;
    }
</style>
